<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <style type="text/css">
        img.home,#home {
            left:0px;
            width: 46px;
            height: 44px;
            background:url(img_navsprites_hover.gif) 0 0;
        }

        img.next,#next {
            left:129px;
            width: 43px;
            height: 44px;
            background:url(img_navsprites_hover.gif) -91px 0;
        }

        img.last,#prev {
            left:63px;
            width: 43px;
            height: 44px;
            background:url(img_navsprites_hover.gif) -47px 0;
        }

        #navlist {
            position:relative;
        }
        #navlist li {
            margin:0px;
            padding:0px;
            list-style-type:none; 
            position:absolute;
            top:0;
        }
        #navlist li, #navlist a {
            height:44px;
            display:block;
        }
        #home a:hover {
            background:url('img_navsprites_hover.gif') 0 -45px;
        }
        #prev a:hover {
            background:url('img_navsprites_hover.gif') -47px -45px;
        }
        #next a:hover {
            background:url('img_navsprites_hover.gif') -91px -45px;
        }

        .clearfix:after {
            content: "." ;
            display:block;
            height:0;
            clear:both;
            visibility:hidden;
        }

    </style>
	<title></title>
</head>
<body>

<p>    hello</p>
    <!-- <img src="http://www.w3schools.com/css/img_trans.gif" alt="" style="border:2px solid black" width="100" height="100"/> -->
    <img src="http://localhost/img_navsprites_hover.gif" alt="" />
    <hr />
    <img src="img_trans.gif" alt="" class="home" width="1" height="1" />
    <br />
    <br />
    <img src="img_trans.gif" alt="" class="next" width="1" height="1" />
    <br />
    <br />
    <img src="img_trans.gif" alt="" class="last" width="1" height="1" />
    <hr />
    <div style="height:45px;border:1px" class="clearfix">
        <ul id="navlist">
        	<li id="home">
        		<a href="default.asp"></a>
        	</li>
        	<li id="prev">
        		<a href="last.asp"></a>
        	</li>
        	<li id="next">
        		<a href="next.asp"></a>
        	</li>
        </ul>
    </div>

    <hr />
    <div style="width:200px;border:1px solid blue;">
    	<div style="float:left;width:80px;height:80px;border:1px solid red">test div 1</div>
    	<div style="float:left;width:80px;height:80px;border:1px solid red">test div 2</div>
    	<div style="float:left;width:80px;height:80px;border:1px solid red">test div 3</div>
        <div style="clear:both;"></div>
    </div>
    <hr />
    <div style="width:200px;border:1px solid blue;" class="clearfix">
    	<div style="float:left;width:80px;height:80px;border:1px solid red">test div 1</div>
    	<div style="float:left;width:80px;height:80px;border:1px solid red">test div 2</div>
    	<div style="float:left;width:80px;height:80px;border:1px solid red">test div 3</div>
    </div>
<p>aaaaafter</p>
	
</body>
</html>
